
{% extends 'base.html' %}

{% block css%}
<style type="text/css">

</style>
{% endblock %}

{% block body%} 
<div class="row">

	  <div class="col-md-5">
	  	<h3>ITLA Register</h3>
		<table class="table table-hover table-responsive form-inline">
			<tr>
				<td>
					<input class="form-control" id="itla_reg_p1" type="text" style="width:120px; height:30px" placeholder="register">	
					<input class="form-control" id="itla_reg_p2" type="text" style="width:120px; height:30px" placeholder="value">	
				</td>
				<td width="20%" class="display_resp">
					<span id="itla_reg_text">---</span>
				</td>
				<td>
					<span class="pull-right">
						<button id="btn_get_itla_reg" class="btn btn-success">Get</button>
						<button id="btn_set_itla_reg" class="btn btn-primary">Set</button>
					</span>
				</td>
				<td>
				</td>
			</tr>
		</table>

	  	<h3>Current Values</h3>
		<table class="table table-hover table-responsive form-inline">
			<tr>
				<td>
					Frequency (THz)
				</td>
				<td width="50%" class="display_resp">
					<span id="itla_freq_text">---</span>
				</td>
			</tr>
			<tr>
				<td>
					Power (dBm)
				</td>
				<td class="display_resp">
					<span id="itla_power_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Temperature (℃)
				</td>
				<td class="display_resp">
					<span id="itla_temp_text">---</span>
				</td>
			</tr>

<!-- fcf = first channle frequency, 
lff = laser's first frequency, 
llf = laser's last frequency
ftf = fine tune frequency -->

			<tr>
				<td>
					First Channle Frequency
				</td>
				<td class="display_resp">
					<span id="itla_fcf_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Laser's First Frequency
				</td>
				<td class="display_resp">
					<span id="itla_lff_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Laser's Last Frequency
				</td>
				<td class="display_resp">
					<span id="itla_llf_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Fine Tune Frequency
				</td>
				<td class="display_resp">
					<span id="itla_ftf_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Grid
				</td>
				<td class="display_resp">
					<span id="itla_grid_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Channel
				</td>
				<td class="display_resp">
					<span id="itla_channel_text">---</span>
				</td>
			</tr>
			<tr>
			
			<td>
					<a href="#" onclick="get_rel_info()">Release</a>
					&nbsp;&nbsp;
                    <i id="rel_loading" class="fa fa-refresh fa-spin fa-fw"></i>
				</td>
				<td class="display_resp">
					<span id="itla_release_text">---</span>
				</td>
			</tr>


<!-- 			<tr>
				<td>
					Channel
				</td>
				<td class="display_resp">
					<span id="itla_channel_text">---</span>
				</td>
			</tr>

			<tr>
				<td>
					Grid
				</td>
				<td class="display_resp">
					<span id="itla_grid_text">---</span>
				</td>
			</tr> -->

			<tr>
				<td>
				</td>
				<td>
					<button id="btn_get_itla_current_values" class="btn btn-success pull-right">
						Refresh
						&nbsp;&nbsp;
                        <i id="refresh_loading" class="fa fa-refresh fa-spin fa-fw"></i>
					</button>
				</td>
			</tr>

		
		</table>


	  </div>

	  <div class="col-md-4">

	  	<h3>Main Control</h3>
		<table class="table table-hover table-responsive table-condensed form-inline">
<!-- 			<tr>
				<td>
				Base Frequency (THz)
				</td>
				<td>
					<input class="form-control" id="itla_settings_freq" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<button id="btn_set_itla_settings_freq" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr> -->

			<tr>
				<td>
				Channel (No.)
				</td>
				<td>
					<input class="form-control" id="itla_settings_channel" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<!-- <button id="btn_get_itla_settings_channel" class="btn btn-success">Get</button> -->
					<button id="btn_set_itla_settings_channel" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				Optical Power (dBm)
				</td>
				<td>
					<input class="form-control" id="itla_settings_power" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<!-- <button id="btn_get_itla_settings_power" class="btn btn-success">Get</button> -->
					<button id="btn_set_itla_settings_power" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>	

			<tr>
				<td>
				Grid
				</td>
				<td>
					<input class="form-control" id="itla_settings_grid" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<!-- <button id="btn_get_itla_settings_power" class="btn btn-success">Get</button> -->
					<button id="btn_set_itla_settings_grid" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				First Channle Frequency
				</td>
				<td>
					<input class="form-control" id="itla_settings_fcf" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<button id="btn_set_itla_settings_fcf" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				Fine Tune Frequency
				</td>
				<td>
					<input class="form-control" id="itla_settings_ftf" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<button id="btn_set_itla_settings_ftf" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				<!-- Wave Length -->
				Frequency
				</td>
				<td>
					<input class="form-control" id="itla_settings_wavelength" type="text" style="width:120px; height:30px" >	
				</td>
				<td>
					<button id="btn_set_itla_settings_wavelength" class="btn btn-primary">Set</button>
				</td>
				<td>
				</td>
			</tr>
		</table>



		<h3>ITLA Enable</h3>
		<table class="table table-hover table-responsive table-condensed form-inline">
			<tr>
				<td width="33%">
				Status
				</td>
				<td>
					<select class="form-control" id="itla_status" style="height: 30px; width: 120px">
						<option value="0">disable</option>
						<option value="1">enable</option>
					</select>		
				</td>
				<td>
					<span class="pull-right">
					<button id="btn_get_itla_status" class="btn btn-success">Get</button>
					<button id="btn_set_itla_status" class="btn btn-primary">Set</button>
					</span>
				</td>
			</tr>
		
		</table>

        <hr>
        <table class="table table-hover table-condensed form-inline">
            <tr>
                <td style="font-size:12px" width="33%">DDB Password</td>
                <td style="background: #FFFFCC">
                    <span style="font-size:12px" id="txt_ddb_password">---</span>
                </td>
                <td width="25%">
                    <button id="btn_set_ddb_password" class="btn btn-primary">
                        Set
                    </button>
                </td>
            </tr>
        </table>

	  </div>

</div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">


	function get_rel_info()
	{
		$("#rel_loading").show();
		url = "api/get_rel_info";
		$.get(url, function(data, status){
			console.log(data);
			$("#rel_loading").hide();
			$("#itla_release_text").html(data);

		});
	}

	function set_password()
	{
	    url = "/api/set_password";
	    $.get(url, function(data, status) {
	        console.log(data);
	    });
	}

	$(document).ready(function(){
	    toastr.options = {
	        "closeButton": true,
	        "positionClass": "toast-top-center"
	    }
		
		// btn_get_itla_status();
		$("#refresh_loading").hide();
		$("#rel_loading").hide();
		
		set_password();
		
		$("#btn_set_ddb_password").click(function() {
	      $.post(
	          "api/btn_set_ddb_password", {},
	          function(data, status) {
	              toastr["success"]("Command successfully issued.");
	              console.log("data: " + data);
	              $("#txt_ddb_password").html(data);
	          }
	      );
	    })


		$("#btn_get_itla_reg").click(function(){
			var itla_reg_p1 =  $("#itla_reg_p1").val();
			console.log("btn_get_itla_reg...");
		    $.post(
		        "api/get_itla_reg", {
		            itla_reg_p1: itla_reg_p1
		        },
		        function(data, status) {
		            console.log("data: " + data);
		            $("#itla_reg_text").html(data);
		        }
		    );
		});

		$("#btn_set_itla_reg").click(function(){
			var itla_reg_p1 =  $("#itla_reg_p1").val();
			var itla_reg_p2 =  $("#itla_reg_p2").val();
			console.log("btn_set_itla_reg...");
			$.post(
		        "api/set_itla_reg", {
		            itla_reg_p1: itla_reg_p1,
		            itla_reg_p2: itla_reg_p2
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});


		$("#btn_get_itla_current_values").click(function(){
			$("#refresh_loading").show();
			console.log("btn_get_itla_current_values...");
			url = "api/get_itla_current_values";
			$.get(url, function(data, status){
				$("#refresh_loading").hide();
				console.log(data);
				ret = data.split(',')
				$("#itla_freq_text").html(ret[0]);
				$("#itla_power_text").html(ret[1]);
				$("#itla_temp_text").html(ret[2]);
				// add 
				$("#itla_fcf_text").html(ret[3]);
				$("#itla_lff_text").html(ret[4]);
				$("#itla_llf_text").html(ret[5]);
				$("#itla_ftf_text").html(ret[6]);
				$("#itla_grid_text").html(ret[7]);
				$("#itla_channel_text").html(ret[8]);
				// $("#itla_release_text").html(ret[9]);
			});
		});

		$("#btn_set_itla_status").click(function(){
			var itla_status =  $("#itla_status").val();
		    $.post(
		        "api/set_itla_status", {
		            itla_status: itla_status
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		
		});


		$("#btn_get_itla_status").click(function(){
			console.log("btn_get_itla_status...");
			url = "api/get_itla_status";
			$.get(url, function(data, status){
				console.log(data);
				$('#itla_status').val( data ).prop('selected',true);
			});
		});


		$("#btn_set_itla_settings_freq").click(function(){
			var itla_settings_freq =  $("#itla_settings_freq").val();
			console.log("btn_set_itla_settings_freq...");
			$.post(
		        "api/set_itla_settings_freq", {
		            itla_settings_freq: itla_settings_freq
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});


		$("#btn_set_itla_settings_channel").click(function(){
			var itla_settings_channel =  $("#itla_settings_channel").val();
			console.log("btn_set_itla_settings_channel...");
			$.post(
		        "api/set_itla_settings_channel", {
		            itla_settings_channel: itla_settings_channel
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});


		$("#btn_set_itla_settings_power").click(function(){
			var itla_settings_power =  $("#itla_settings_power").val();
			console.log("btn_set_itla_settings_power...");
			$.post(
		        "api/set_itla_settings_power", {
		            itla_settings_power: itla_settings_power
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});


		$("#btn_set_itla_settings_grid").click(function(){
			var itla_settings_grid =  $("#itla_settings_grid").val();
			console.log("btn_set_itla_settings_grid...");
			$.post(
		        "api/set_itla_settings_grid", {
		            itla_settings_grid: itla_settings_grid
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});

		$("#btn_set_itla_settings_fcf").click(function(){
			var itla_settings_fcf =  $("#itla_settings_fcf").val();
			console.log("btn_set_itla_settings_fcf...");
			$.post(
		        "api/set_itla_settings_fcf", {
		            itla_settings_fcf: itla_settings_fcf
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});

		$("#btn_set_itla_settings_ftf").click(function(){
			var itla_settings_ftf =  $("#itla_settings_ftf").val();
			console.log("btn_set_itla_settings_ftf...");
			$.post(
		        "api/set_itla_settings_ftf", {
		            itla_settings_ftf: itla_settings_ftf
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});


		$("#btn_set_itla_settings_wavelength").click(function(){
			var itla_settings_wavelength =  $("#itla_settings_wavelength").val();
			console.log("btn_set_itla_settings_wavelength...");
			$.post(
		        "api/set_itla_settings_wavelength", {
		            itla_settings_wavelength: itla_settings_wavelength
		        },
		        function(data, status) {
		        	toastr["success"]("Command successfully issued.");
		            console.log("data: " + data);
		        }
		    );
		});	





	});
</script>
{% endblock %}